<template>
	<view class="movie_page">
		<view class="movie_box">
			<view class="movie_top">
				<view class="movie_head__box">
					<view class="movie_search__box">
						<view class="movie_search__left">
							<image src="@/static/xinjiang/movie_search.png" mode="aspectFit" class="movie_search__icon">
							</image>
							<input type="text" placeholder="搜索你喜欢的电影或电视剧..." class="movie_search__input" />
						</view>
						<image src="@/static/xinjiang/movie_record.png" mode="aspectFit" class="movie_search__record" @click="jumpTo('/pages/movie/watchHistory/watchHistory')">
						</image>
					</view>
				</view>

				<view class="movie_menu__box">
					<scroll-view class="movie_type__box scroll-view_H" scroll-x="true">
						<view class="movie_type__item" :class="{'movie_type__item___a': searchForm.type === item.key}"
							v-for="item in categoryList.type_list" @click="onSelect('type', item.key)">
							<text>{{ item.value }}</text>
							<view class="movie_type__a" v-if="searchForm.type === item.key"></view>
						</view>
					</scroll-view>

					<view class="movie_menu__container">
						<view class="movie_category__box">
							<text class="pr_30">全部地区</text>
							<view class="movie_category__content">
								<scroll-view scroll-x="true">
									<view class="movie_category__item"
										:class="{'movie_category__item__a': searchForm.region == item.key}"
										v-for="item in categoryList.region_list" @click="onSelect('region', item.key)">
										{{ item.value }}
									</view>
								</scroll-view>
							</view>
						</view>

						<view class="movie_category__box">
							<text class="pr_30">全部类型</text>
							<view class="movie_category__content">
								<scroll-view scroll-x="true">
									<view class="movie_category__item"
										:class="{'movie_category__item__a': searchForm.category_id == item.id}"
										v-for="item in categoryList.category_list"
										@click="onSelect('category_id', item.id)">
										{{ item.name }}
									</view>
								</scroll-view>
							</view>
						</view>

						<view class="movie_category__box">
							<text class="pr_30">全部年份</text>
							<view class="movie_category__content">
								<scroll-view scroll-x="true">
									<view class="movie_category__item"
										:class="{'movie_category__item__a': searchForm.year == item.key}"
										v-for="item in categoryList.year_list" @click="onSelect('year', item.key)">
										{{ item.value }}
									</view>
								</scroll-view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="movie_content">
				<scroll-view scroll-y="true" class="movie_scroll" @scrolltolower="loadMore">
					<u-empty mode="list" v-if="videoList.length === 0 && !loading"></u-empty>
					<view class="movie_list__box">
						<view class="movie_list__item" :class="{'mr_30': index % 2 === 0}"
							v-for="(item, index) in videoList" @click="goTodetail(item)">
							<image :src="item.thumb" mode="aspectFill" class="movie_list__img"></image>
							<view class="movie_list__title">{{ item.title }}</view>
							<view class="movie_list__subtitle">{{ item.subtitle }}</view>
						</view>
					</view>
					<u-loadmore :status="status" />
					<view style="height: 60rpx;"></view>
				</scroll-view>
			</view>
		</view>

		<view class="movie_tabbar">
			<v-tabbar></v-tabbar>
		</view>
	</view>
</template>

<script>
	import {
		category
	} from "@/js_sdk/index.js"
	import {
		searchVideo
	} from "@/js_sdk/video.js"

	export default {
		data() {
			return {
				categoryList: [],
				searchForm: {
					type: '',
					category_id: '',
					region: '',
					year: ''
				},
				current_page: 1,
				total_page: 0,
				pull_loading: false,
				loading: false,
				videoList: [],
				status: 'loadmore'
			}
		},
		onLoad() {
			this.getCategory()
		},
		methods: {
			jumpTo(url) {
				uni.navigateTo({ url })
			},
			goTodetail(item) {
				// this.$store.dispatch("video", item)
				uni.navigateTo({
					url: `/pages/movie/movie_detail?id=${item.id}`
				})
			},
			getCategory() {
				category().then(({
					data
				}) => {
					this.categoryList = data
					this.searchForm.type = data.type_list[0].key
					this.getList()
				}).catch(error => {
					console.log(error)
				})
			},
			onSelect(type, key) {
				this.searchForm[type] = key
				this.current_page = 1
				this.total_page = 0
				this.videoList = []
				this.getList()
			},
			getList(replace) {
				this.status = 'loading'
				this.loading = true
				this.searchForm.page = this.current_page
				searchVideo(this.searchForm).then(res => {
					this.pull_loading = false
					this.loading = false
					this.total_page = res.data.total_page
					this.current_page = res.data.current_page
					this.videoList = replace ? res.data.list : this.videoList.concat(res.data.list)
					if (this.current_page >= this.total_page) {
						this.status = 'nomore'
					}
				}).catch(error => {
					this.pull_loading = false
					this.loading = false
					console.log(error)
				})
			},
			loadMore() {
				if (this.loading) return
				this.current_page++
				this.getList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import url("movie.scss");
</style>